<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			body{
				height: 10000px;
				/* width: 4000px; */
			}
			#nav{
				height: 80px;
				border: 2px solid gold;
				background-color: blue;
			}
			#search{
				margin:  0 auto;
				width: 400px;
				height: 30px;
				border: 1px solid red;
				border-radius: 15px;
				padding-left: 20px;
				padding-top: 4px;
			}
		</style>
		<script>
			var left=0;
			var h=0;
			window.onload=function(){
				var se=document.getElementById("search");
				left=se.offsetLeft;
				h=se.offsetTop;
			}
			//捕捉到滚动的事件
			window.onscroll=function(){
				var x=document.documentElement.scrollLeft||document.body.scrollLeft;
				var y=document.documentElement.scrollTop||document.body.scrollTop;
				console.log("x="+x+",y="+y);
				var se=document.getElementById("search");
				//var h=se.offsetTop;
				
				console.log("left:"+left);
				if(y>=h){
					se.style.position="fixed"; 
					se.style.left=left+"px";
					se.style.top="5px";
				}else{
					se.style.position="static"; 
				}
			}
		</script>
	</head>
	<body>
		<div id="nav"></div>
		<div id="search">
			<form>
				<input type="search" name="wd"/><input type="submit" value="搜索"/>
			</form>
		</div>
	</body>
</html>
